<template>
	<div class="Time-display">
		<p class="date">{{ currentTime.split(' ')[0] }}</p>
		<p class="time">{{ currentTime.split(' ')[1] }}</p>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue';

	// 定义响应式的当前时间
	const currentTime = ref('');
	// 定时器 ID 引用
	const timerId = ref(null);

	// 获取当前时间并格式化
	const getFormattedTime = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = ('0' + (now.getMonth() + 1)).slice(-2);
		const day = ('0' + now.getDate()).slice(-2);
		const hours = ('0' + now.getHours()).slice(-2);
		const minutes = ('0' + now.getMinutes()).slice(-2);
		const seconds = ('0' + now.getSeconds()).slice(-2);
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	};

	onMounted(() => {
		// 初始化当前时间
		currentTime.value = getFormattedTime();
		// 启动定时器，每秒更新时间
		timerId.value = setInterval(() => {
			currentTime.value = getFormattedTime();
		}, 1000);
	});

	onUnmounted(() => {
		// 组件卸载时清除定时器，避免内存泄漏
		if (timerId.value) {
			clearInterval(timerId.value);
		}
	});
</script>


<style lang="scss" scoped>
	* {
		margin: 0px;
		padding: 0px;
		border: none;
		border-radius: 0px;
		font-size: 14px;
		font-weight: 300px;
		color: #000;
	}
	.Time-display {
		width: 100%;
		min-width: 150px;
		margin-top: 30px;
		border: none;
		overflow: hidden;
		height: 200px;
		background-color: rgba(88, 253, 255, 0.5);
		backdrop-filter: blur(5px);
		border-radius: 20px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		padding: 40px;
		border-radius: 20px;
		text-align: center;
		.date {
			font-size: 36px;
			color: white;
			margin-bottom: 10px;
			font-weight: 700;
		}
		
		.time {
			font-size: 36px;
			color: white;
			font-weight: 500;
		}
	}

	
</style>